import React, { memo, useMemo } from 'react';

export default memo(
    (props: {
        name: string;
        size?: string | number;
        className?: string;
        onClick?: (...rest: Array<unknown>) => unknown;
        style?: React.CSSProperties;
        title?: string;
    }) => {
        const className = useMemo(() => {
            return `iconfont ${props.name} ${props?.className || ''}`;
        }, [props.name, props.className]);

        const fontSize = useMemo(() => {
            return (
                (props.size && {
                    fontSize: props.size + 'px'
                }) ||
                {}
            );
        }, [props.size]);

        return (
            <span
                title={props.title}
                onClick={props.onClick}
                className={className}
                style={{ ...fontSize, ...(props.style || {}) }}
            />
        );
    }
);
